<template>
  <div class="selectparam">
    <el-scrollbar height="400px">
      <div class="div-scrollbar">
        <el-row class="row-header">
          <div class="search">
            <el-input
              v-model="pageData.queryParams.fParamCode"
              placeholder="请输入参数编号"
              clearable
              ><template #prepend>参数编号</template>
            </el-input>

            <el-input
              v-model="pageData.queryParams.fParamName"
              placeholder="请输入参数名称"
              clearable
              ><template #prepend>参数名称</template>
            </el-input>

            <el-button type="primary" plain @click="onHandleSearch"
              >搜索</el-button
            >
            <el-button type="warning" plain @click="onHandleReset"
              >重置</el-button
            >
          </div>
        </el-row>
        <el-row class="row-content">
          <el-col :span="24">
            <!-- .filter((v) => v.fState != '20') -->
            <el-table
              :data="pageData.tableParams.tableData"
              style="width: 100%"
              border
              stripe
              v-loading="pageData.tableParams.tableLoading"
              :highlight-current-row="!pageData.tableParams.isMulti"
              @row-click="onHandleTableSelectionChange"
              @current-change="onHandleTableCurrentChange"
            >
              <el-table-column
                v-if="pageData.tableParams.isMulti"
                type="selection"
                width="45"
                align="center"
              >
              </el-table-column>
              <el-table-column
                fixed
                prop="fParamCode"
                label="参数编号"
                min-width="120"
              />
              <el-table-column
                prop="fParamName"
                label="参数名称"
                min-width="120"
              />
              <el-table-column
                prop="fParamValue"
                label="参数值"
                min-width="120"
              />
              <el-table-column prop="fParamType" label="类型" min-width="120" />
              <el-table-column
                prop="fParamValueID"
                label="参数id"
                min-width="120"
              />

              <el-table-column prop="fState" label="状态" />
              <el-table-column prop="fRemark" label="备注" />
            </el-table>
            <el-col :span="24">
              <el-pagination
                style="margin-top: 20px"
                layout="total, sizes, prev, pager, next, jumper"
                :page-sizes="pageData.tableParams.pageSizeOptions"
                :current-page="pageData.queryParams.page"
                :page-size="pageData.queryParams.pageSize"
                :total="pageData.tableParams.totalCount"
                @current-change="onHandleCurrentChange"
                @size-change="onHandleSizeChange"
              >
              </el-pagination>
            </el-col>
          </el-col>
        </el-row>
      </div>
    </el-scrollbar>
    <el-row>
      <el-col :span="24" style="text-align: right; margin-top: 5px">
        <el-button @click="onHandleCancel">取 消</el-button>
        <el-button type="primary" @click="onHandleSure">确 定</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { onMounted, nextTick, reactive, ref, watch } from "vue";
import { ElMessage } from "element-plus";
import utils from "@/common/utils";
import { query_csinfo } from "@/api/basic/parameterinfo";

export default {
  name: "SelectParam",
  components: {},
  props: {
    isMulti: { type: Boolean, default: false },
  },
  setup(props, context) {
    onMounted(() => {
      nextTick(getCsinfoTableData);
    });
    const paramTable = ref();

    const pageData = reactive({
      queryParams: {
        fParamCode: "",
        fParamName: "",
        page: 1,
        pageSize: 10,
      },
      tableParams: {
        tableLoading: false,
        tableHeight: 0,
        pageSizeOptions: ["10", "15", "30", "50", "100", "200"],
        totalCount: 0,
        tableData: [],
        multipleSelection: [],
        currentRow: {},
        isMulti: props.isMulti,
      },
    });

    // 分页查询
    const onHandleCurrentChange = (e) => {
      pageData.queryParams.page = e;
      // console.log("e", e);
      getCsinfoTableData();
    };
    const onHandleSizeChange = (e) => {
      pageData.queryParams.page = 1;
      pageData.queryParams.pageSize = e;
      // console.log("2", e);
      getCsinfoTableData();
    };
    // 获取参数数据
    const getCsinfoTableData = () => {
      pageData.currentRow = {};
      pageData.tableParams.tableLoading = true;
      //获取参数信息接口
      query_csinfo(pageData.queryParams) .then((res) => {
          console.log("参数查询", res);
          pageData.tableParams.tableData = res.list;
          pageData.tableParams.totalCount = res.list.length;
          pageData.tableParams.tableLoading = false;
        })
    };
    // 模糊查询
    const onHandleSearch = () => {
      getCsinfoTableData();
    };
    // 重置
    const onHandleReset = () => {
      pageData.queryParams.fParamCode = "";
      pageData.queryParams.fParamName = "";
      getCsinfoTableData();
    };

    // 选择数据行
    const onHandleTableSelectionChange = (rowArr) => {
      pageData.tableParams.multipleSelection = rowArr;

      pageData.tableParams.currentRow = {};
    };
    const onHandleTableCurrentChange = (row) => {
      if (!pageData.tableParams.isMulti) {
        pageData.tableParams.multipleSelection = [row];
        pageData.tableParams.currentRow = row;
      }
    };

    // 取消
    const onHandleCancel = () => {
      context.emit("cancel");
    };
    // 提交
    const onHandleSure = () => {
      if (
        utils.isEmpty(pageData.tableParams.multipleSelection) ||
        pageData.tableParams.multipleSelection.length < 1
      ) {
        ElMessage.warning("请选择参数");
        return;
      }
      let arr = [pageData.tableParams.multipleSelection];
      // let arr = reactive([pageData.tableParams.multipleSelection]);

      console.log("arr", arr);
      // watch(
      //   ()=>arr[0].fId,
      //   (newvalue, oldvalue) => {
      //     console.log("newvalue", newvalue, "oldvalue", oldvalue);
      //   },
      //   {
      //     deep: true,
      //   }
      // );

      const selectObjs = arr.map((p) => {
        return {
          fParamValueID: p.fParamValueID,
          fParamCode: p.fParamCode,
          fParamName: p.fParamName,
          fParamValue: p.fParamValue,
          obj: p,
        };
      });
      console.log("selectObjs", selectObjs);

      context.emit("ok", selectObjs);
    };
    return {
      paramTable,
      pageData,
      onHandleCurrentChange,
      onHandleSizeChange,
      getCsinfoTableData,
      onHandleSearch,
      onHandleReset,
      onHandleTableSelectionChange,
      onHandleTableCurrentChange,
      onHandleSure,
      onHandleCancel,
    };
  },
};
</script>

<style lang="scss">
.row-header {
  display: flex;
  justify-content: center;
  .search {
    // width: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;

    .el-input {
      margin-right: 20px;
    }
  }
}
</style>

<style>
.el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
  padding-top: 10px;
}
.el-dialog .el-dialog__header {
  padding: 20px 0;
  padding-left: 20px;
  margin: 0;
  /* padding-bottom: 10px; */
  /* margin-right: 16px; */
  word-break: break-all;
  border-bottom: 1px solid #ddd;
  text-align: left;
  /* margin-left: 20px; */
}

.el-select {
  width: 100%;
  border: none;
  border-radius: 0;
}
.el-select .el-option {
  width: 100%;
  border: none;
  border-radius: 0;
}
.el-input-group__prepend {
  padding: 0 10px;
}
</style>
